<template>
<div class="content">
    <mt-header fixed title="危险源">
        <div slot="left">
    <mt-button icon="back" @click.native="goback()">返回</mt-button>
              </div>
    </mt-header>
    <not-data-page v-if="!hazards.length"></not-data-page>
      <div>
        <mt-loadmore  :bottom-method="loadBottom" :bottom-all-loaded="allLoaded"   :autoFill="autoFill"  ref="loadmore">
       <mt-cell v-for="(item) in hazards" :key="item.dresourceid" :title="item.dresname" :label="drestype(item.drestype)" @click.native="goToDetail(item.dresourceid)">
    </mt-cell>
     </mt-loadmore>

    </div>
    </div>
</template>
<script>
import notDataPage from '@/component/notQueryDataPage.vue'
export default {
  data () {
    return {
      hazards: [],
      dres: ['', '油库', '烟花爆竹', '化工厂'],
      allLoaded: false,
      autoFill: false,
      page: 1,
      pages: 0,
      pagesize: 10
    }
  },
  components: {
    notDataPage
  },
  created () {
    this.mydresouces(0)
  },
  methods: {
    goback () {
      this.$router.go(-1)
    },
    async mydresouces (type) {
      const res = await this.$store.dispatch('mydresouces', {
        page: this.page,
        pagesize: this.pagesize})
      if (res.status === '0') {
        this.pages = res.context ? res.context.length : 0
        type ? this.hazards = [...this.hazards, ...res.context] : this.hazards = [...res.context]
      }
    },
    drestype (val) {
      if (!val) {
        return ''
      };
      return this.dres[val]
      // level 危险级别 1，2，3，4
    },
    async loadBottom () {
      this.$refs.loadmore.onBottomLoaded()
      if (this.pages < this.pagesize) {
        this.allLoaded = true
        return
      }
      this.page++
      await this.mydresouces(1)
    },
    goToDetail (dresourceid) {
      this.$router.push({
        path: '/dresoucetails',
        query: {dresourceid}
      })
    }
  }
}
</script>
<style lang="less" scoped>
.content{
  padding-top: 40px;
}
</style>
